<template>
  <scroll-view scroll-y class="scroll-container" style="padding: 0;">

    <view class="section" style="margin-top: 0; border-radius: 8rpx 8rpx 0 0;">
      <view class="section-title">西安风光展示</view>
      <swiper class="single-img-swiper" indicator-dots duration="300" @change="onImgSwiperChange">
        <block v-for="(img, index) in displayImages" :key="index">
          <swiper-item>
            <image :src="img.url" mode="aspectFill" class="single-display-img" />
          </swiper-item>
        </block>
      </swiper>
    </view>

    <!-- 城市介绍 -->
    <view class="section" style="border-radius: 0 0 8rpx 8rpx; margin-bottom: 20rpx;">
      <view class="section-title">城市介绍</view>
      <rich-text :nodes="cityDesc"></rich-text>
    </view>

    <!-- 探索进度 -->
    <view class="section">
      <view class="section-title">探索进度</view>
      <progress :percent="progress" show-info stroke-width="6" />
    </view>

    <!-- 城市选择 -->
    <view class="section">
      <view class="section-title">城市选择</view>
      <picker mode="region" :value="region" @change="onRegionChange">
        <view class="picker-text">当前选择: {{ region[0] }} - {{ region[1] }} - {{ region[2] }}</view>
      </picker>
    </view>

    <!-- 偏好设置 -->
    <view class="section">
      <view class="section-title">偏好设置</view>
      <view class="preference-item">
        <view class="label">出行方式</view>
        <radio-group @change="onRadioChange">
          <label v-for="item in travelModes" :key="item.value">
            <radio :value="item.value" :checked="item.checked" />{{ item.label }}
          </label>
        </radio-group>
      </view>
      <view class="preference-item">
        <view class="label">显示推荐景点</view>
        <switch :checked="showRecommend" @change="onSwitchChange" />
      </view>
      <view class="preference-item">
        <view class="label">探索半径: {{ radius }}km</view>
        <slider :value="radius" :min="1" :max="20" @change="onSliderChange" />
      </view>
    </view>

    <!-- 西安宣传视频模块 -->
    <view class="section">
      <view class="section-title">西安宣传视频</view>
      <video 
        class="promo-video" 
        :src="promoVideoUrl" 
        controls 
        poster="https://via.placeholder.com/750x400?text=西安宣传视频封面" 
        :autoplay="false" 
        :loop="false"
      />
    </view>
  </scroll-view>
</template>

<script setup>
import { ref } from 'vue';

// 西安风光展示的单张轮播图数据
const displayImages = ref([
  { url: 'https://p1.ssl.qhimgs1.com/t0490116cd7d4b44771.jpg' },
  { url: 'https://tr-osdcp.qunarzz.com/tr-osd-tr-space/img/2bbc884a075772660dbdbbfe485c66f1.jpg' },
  { url: 'https://p2.ssl.qhimgs1.com/t04348764f8df54c16c.jpg' }
]);

// 城市介绍富文本
const cityDesc = ref(`
  <p style="font-size:28rpx; line-height:1.6;">
    <strong>西安</strong>，陕西省省会，古称“长安”，是<strong style="color:#ff672b;">中国四大古都之一</strong>，拥有兵马俑、大雁塔、城墙等著名景点，历史文化底蕴深厚。雁塔区是西安的核心城区之一，汇集了大雁塔、陕西历史博物馆等众多文旅资源。
  </p>
`);

// 探索进度
const progress = ref(60);

// 城市选择三级联动
const region = ref(['陕西省', '西安市', '雁塔区']);

// 偏好设置-出行方式
const travelModes = ref([
  { label: '公交', value: 'bus', checked: true },
  { label: '自驾', value: 'drive', checked: false },
  { label: '步行', value: 'walk', checked: false },
]);

// 偏好设置-显示推荐景点
const showRecommend = ref(true);

// 偏好设置-探索半径
const radius = ref(12);

// 西安宣传视频直链（使用你提供的地址）
const promoVideoUrl = ref('https://upos-sz-estgoss.bilivideo.com/upgcxcode/23/04/147710423/147710423-1-160.mp4?e=ig8euxZM2rNcNbRg7WdVhwdlhWNBhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&og=ali&oi=2018263300&mid=3546912105957579&nbs=1&uipk=5&trid=d2e68a241025471eb4e20db83b29e0aT&deadline=1760847437&platform=html5&gen=playurlv3&os=estgoss&upsig=2c3c7b7e61742633c1616ed392527924&uparams=e,og,oi,mid,nbs,uipk,trid,deadline,platform,gen,os&bvc=vod&nettype=0&bw=1006678&build=0&dl=0&f=T_0_0&mobi_app=&agrr=0&buvid=&orderid=0,1');

// 城市选择改变事件
const onRegionChange = (e) => {
  region.value = e.detail.value;
};

// 出行方式单选改变事件
const onRadioChange = (e) => {
  const value = e.detail.value;
  travelModes.value = travelModes.value.map(item => {
    item.checked = item.value === value;
    return item;
  });
};

// 显示推荐景点开关改变事件
const onSwitchChange = (e) => {
  showRecommend.value = e.detail.value;
};

// 探索半径滑块改变事件
const onSliderChange = (e) => {
  radius.value = e.detail.value;
};

// 图片轮播切换事件
const onImgSwiperChange = (e) => {
  console.log('当前展示的图片索引：', e.detail.current);
};
</script>

<style scoped>
.scroll-container {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

.section {
  background-color: #fff;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  color: #333;
}

.picker-text {
  font-size: 28rpx;
  color: #666;
}

.preference-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label {
  width: 200rpx;
  font-size: 28rpx;
  color: #333;
}

radio-group {
  display: flex;
}

radio, label {
  margin-right: 30rpx;
  font-size: 28rpx;
}

slider {
  flex: 1;
  margin-left: 20rpx;
}

/* 单张图片轮播样式 */
.single-img-swiper {
  width: 100%;
  height: 300rpx;
  overflow: hidden;
}

.single-display-img {
  width: 100%;
  height: 100%;
}

/* 宣传视频样式 */
.promo-video {
  width: 100%;
  height: 400rpx;
  border-radius: 8rpx;
  overflow: hidden;
}
</style>



